<!--下拉选择框-->

<template>
  <div class="w-h-full" :style="{
    textAlign: 'center',
    lineHeight: $parent.$parent.layoutItem.layoutItemConfigData.height - 2 + 'px'
  }">
    <!--组件遮罩层，用于在设计器中显示-->
    <div v-if="shade" class="shade"></div>

    <Select v-model="value"
            :multiple="component.compConfigData.multiple"
            :disabled="component.compConfigData.disabled"
            :clearable="component.compConfigData.clearable"
            :size="component.compConfigData.size"
            :placeholder="component.compConfigData.placeholder"
            :notFoundText="component.compConfigData.notFoundText"
            :style="Object.assign({
              width: component.compConfigData.inputStyle.width,
              transform: 'scale('+component.compConfigData.inputStyle.scaleValue+')'
            }, inputStyleObject)"
            @on-change="onChangeHandle"
            @on-clear="onClearHandle">

      <Option v-for="item in runCustomFilter(component.compConfigData.ds_resultObj)" :value="item.value" :label="item.label" :key="item.value">
        <span>{{ item.label }}</span>
        <p style="color: #808695;">{{item.remark}}</p>
      </Option>
    </Select>
  </div>
</template>

<script>

  import FuncCompMixin from '@/mixin/FuncCompMixin'
  import PnDesigner from '@/utils/PnDesigner'

  const _this = {
    name: 'ComboBoxComp', // 此名称必须填写，且必须与组件文件名相同
    mixins: [FuncCompMixin],
    attr: {
      version: '2.2',
      configDataTemp: Object.assign({

        multiple: false,
        disabled: false,
        clearable: false,
        filterable: false,
        size: 'large',
        placeholder: '请选择',
        notFoundText: '',
        defaultValue: '',

        inputStyle: {
          scaleValue: 1,
          width: '150px',
          backgroundColor: '#263238',
          color: '#fff',
          borderColor: '#2196f3'
        },

        onChangeCode: '',
        onClearCode: ''

      }, PnDesigner.buildFuncCompDatasourceField({ // 如果组件需要配置数据源，则需要调用此函数构建数据源字段对象
        ds_resultObjTemplate: [
          {
            field: 'label',
            remark: '选项显示的内容'
          },
          {
            field: 'value',
            remark: '选项值'
          },
          {
            field: 'remark',
            remark: '备注'
          },
        ],
        ds_resultObj: [
          {
            label: 'New York',
            value: 'New York',
            remark: ''
          },
          {
            label: 'London',
            value: 'London',
            remark: ''
          },
          {
            label: 'Sydney',
            value: 'Sydney',
            remark: ''
          },
        ],
        ds_useFilter: true, // 是否使用过滤器，默认不使用
      }), PnDesigner.buildFuncCompGlobalField(), PnDesigner.buildFuncCompInteractionConfiguration([
          PnDesigner.buildFuncCompInteractionStreamItem('itemChange', [
              PnDesigner.buildFuncCompInteractionFieldsMapItem('value','')
          ]),
          PnDesigner.buildFuncCompInteractionStreamItem('itemClear', [
            PnDesigner.buildFuncCompInteractionFieldsMapItem('value','')
          ])
      ]))
    },
    data() {
      return {
        value: ''
      }
    },
    mounted() {
      this.init();

      if (this.component.compConfigData.defaultValue) {
        this.value = this.component.compConfigData.defaultValue
      }
    },
    methods: {
      init () { // 组价初始化函数，函数名必须使用init，不可更改
        this.initDatasource(() => {
          this.runCustomGlobalJsCode()
        }, (result) => {
          this.runCustomGlobalJsCode()
        });
      },

      onChangeHandle (value) {
        this.$PnDesigner.launchInteractionStream(this.component.compConfigData, 'itemChange',
            {value: this.component.compConfigData.multiple ? value.toString() : value})
        eval(this.component.compConfigData.onChangeCode)
      },
      onClearHandle () {
        this.$PnDesigner.launchInteractionStream(this.component.compConfigData, 'itemClear', {value: ''})
        eval(this.component.compConfigData.onClearCode)
      }
    },
    computed: {
      inputStyleObject () {
        return {
          '--background-color': this.component.compConfigData.inputStyle.backgroundColor,
          '--color': this.component.compConfigData.inputStyle.color,
          '--border-color': this.component.compConfigData.inputStyle.borderColor,
        }
      }
    }
  };

  export default _this
</script>

<style scoped>
  >>> .ivu-select-selection {
    background-color: var(--background-color) !important;
    border: 1px solid var(--border-color) !important;
    text-align: left;
  }
  >>> .ivu-select-selection .ivu-select-placeholder {
    color: var(--color) !important;
    text-align: left !important;
  }
  >>> .ivu-select-arrow {
    color: var(--color) !important;
  }
  >>> .ivu-select-selected-value {
    color: var(--color) !important;
    text-align: left !important;
  }
</style>
